<template>
  <div class="container">
    <div v-if="loading" class="loading-spinner">Loading...</div>
    <div v-else class="content">
      <h1 class="hospital-title">全国前十医院</h1>
      <ul class="hospital-list">
        <li v-for="(hospital, hospitalIndex) in hospitalData" :key="hospitalIndex" class="hospital-item">
          <div class="hospital-info-container">
            <div class="hospital-info-left">
              <div class="hospital-header">
                <h2>{{ hospital.hospitalName }}</h2>
              </div>
              <div class="hospital-details">
                <img :src="hospital.hospitalPicture" alt="Hospital Picture" class="hospital-img">
                <div class="hospital-info-text">
                  <p><strong>医院级别:</strong> {{ hospital.hospitalLevel }}</p>
                  <p><strong>全国排名:</strong> {{ hospital.nationalRank }}</p>
                  <p><strong>医院介绍:</strong></p>
                  <p style="white-space: pre-wrap;">{{ hospital.hospitalIntroduction }}</p>
                </div>
              </div>
            </div>
            <div class="hospital-info-right">
              <div class="department-section">
                <h3>科室</h3>
                <div class="hospital-tree">
                  <el-tree :data="convertData(hospital)" :props="defaultProps"></el-tree>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { getHospital } from "@/api/departments/departments/departments";
import DepartmentTree from "@/views/departments/departments/CascadeList.vue";

export default {
  name: 'Index',
  components: { DepartmentTree },
  data() {
    return {
      hospitalData: [],
      loading: true,
      showForm: false,
      formTitle: '',
      formButtonText: '',
      form: {
        departmentsId: null,
        departmentsName: null,
        parentId: null,
        lastUpdateTime: null,
        state: null,
        isDelete: null
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  created() {
    this.getHospitalData();
  },
  methods: {
    getHospitalData() {
      getHospital()
        .then(res => {
          // 数据预处理，将 madicalDoctorList 转换为 medicalDoctorList
          const correctedData = res.data.map(hospital => {
            hospital.departmentsVos = hospital.departmentsVos.map(department => {
              department.childrenList = department.childrenList.map(childDepartment => {
                if (childDepartment.madicalDoctorList) {
                  childDepartment.medicalDoctorList = childDepartment.madicalDoctorList;
                  delete childDepartment.madicalDoctorList;
                }
                return childDepartment;
              });
              return department;
            });
            return hospital;
          });
          this.hospitalData = correctedData;
          this.loading = false;
          console.log('医院数据获取成功:', this.hospitalData);
        })
        .catch(error => {
          this.loading = false;
          console.error('获取医院数据失败:', error);
          alert('获取医院数据时出现错误，请检查网络或联系管理员');
        });
    },
    resetForm() {
      this.form.departmentsId = null;
      this.form.departmentsName = null;
      this.form.parentId = null;
      this.form.lastUpdateTime = null;
      this.form.state = null;
      this.form.isDelete = null;
    },
    cancelForm() {
      this.showForm = false;
      this.resetForm();
    },
    submitForm() {
      if (this.formButtonText === '添加') {
        axios.post('/api/departments', this.form)
          .then(() => {
            this.getHospitalData();
            this.cancelForm();
            alert('添加成功');
          })
          .catch(error => {
            console.error('添加科室失败:', error);
            alert('添加科室时出现错误，请检查输入或联系管理员');
          });
      } else {
        axios.put(`/api/departments/${this.form.departmentsId}`, this.form)
          .then(() => {
            this.getHospitalData();
            this.cancelForm();
            alert('保存成功');
          })
          .catch(error => {
            console.error('保存科室信息失败:', error);
            alert('保存科室信息时出现错误，请检查输入或联系管理员');
          });
      }
    },
    convertData(hospital) {
      return hospital.departmentsVos.map(department => {
        return {
          label: department.departmentsName,
          departmentsId: department.departmentsId,
          children: (department.childrenList || []).map(childDepartment => {
            return {
              label: childDepartment.departmentsName,
              departmentsId: childDepartment.departmentsId,
              children: (childDepartment.medicalDoctorList || []).map(doctor => {
                return {
                  label: doctor.name,
                  // 可以添加更多医生信息，如性别、电话等
                  sex: doctor.sex,
                  phone: doctor.phone,
                  doctorId: doctor.id
                };
              })
            };
          })
        };
      });
    }
  }
};
</script>

<style scoped>
.loading-spinner {
  text-align: center;
  padding: 20px;
}

.container {
  padding: 20px;
}

.hospital-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.hospital-item {
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  gap: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hospital-info-container {
  display: flex;
  flex: 1;
}

.hospital-info-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.hospital-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.hospital-img {
  max-width: 300px;
  max-height: 300px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-left: 210px; /* 将图片向右移动 20px */
}

.hospital-info-text {
  text-align: center;
}

.hospital-info-right {
  flex: 1;
  padding: 10px;
}

.department-section {
  margin-top: 20px;
}

.hospital-tree {
  display: flex;
  gap: 20px;
}

.hospital-tree.el-tree-node__label {
  font-size: 14px;
  line-height: 24px;
}

.hospital-tree.el-tree-node__content {
  padding-left: 20px;
}

.hospital-tree.hospital-label {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.hospital-tree.department-label {
  font-size: 16px;
  color: #666;
}

.hospital-tree.doctor-label {
  font-size: 14px;
  color: #999;
}

.hospital-tree.el-tree-node {
  display: flex;
  flex-direction: row;
}

.hospital-tree.el-tree-node__children {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hospital-tree.el-tree-node__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-left: 20px;
}

.hospital-tree.el-tree-node__expand-icon {
  order: 2;
}

.hospital-tree.el-tree-node__label {
  order: 1;
}

.hospital-tree.department-info {
  display: flex;
  flex-direction: row;
}

.hospital-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}
</style>
